import React, { Component } from 'react';
import './index.scss'
import { Button, Tabs, Drawer, message, Modal, Radio } from 'antd'
import olMap from '../../utils/olMap'
import Header from '../header'
import Information from '../leftInformation'
import FuncList from '../rightList';
import Footer from '../footer';
import { textHeights } from 'ol/render/canvas';

const { TabPane } = Tabs;

const mapList = [
	{ key: 'olMap', name: 'Openayers' },
	{ key: 'Gaode', name: '高德' },
	{ key: 'Baidu', name: '百度' },
	{ key: 'Tdt', name: '天地图' },
	{ key: 'Mapbox', name: 'MapBox' },
]
export default class Home extends Component {

	state = {
		MapVisible: false,         //切换引擎
		mapType: null,      //引擎类型
	}

	componentDidMount(): void {
		this.initMap()
	}

	//地图初始化
	initMap = () => {
		olMap.init()
	}

	//切换地图引擎
	changeMapGL = () => {
		this.setState({
			MapVisible: true
		})
	}

	// 地图引擎改变
	onMapChanged = (e: any) => {
		this.setState({
			mapType: e.target.value
		})
		localStorage.setItem('mapType', e.target.value)
	}

	render() {
		const { MapVisible } = this.state
		return <>
			<div id="olMap" className="initMap"></div>
			<div className="mask"></div>
			{/* <Header changeHeader={this.changeHeader} /> */}
			<Drawer
				placement='left'
				className='MapDrawer'
				closable={false}
				mask={false}
				width={392}
				onClose={() => { this.setState({ visible: false }) }}
				visible={true}
			>
				<Information />
			</Drawer>
			<FuncList />
			<Footer changeMapGL={this.changeMapGL} />

			<Modal
				visible={MapVisible}
				title="请选择地图引擎"
				okText="确认"
				cancelText="取消"
				className="initModal"
				onCancel={() => this.setState({ MapVisible: false })}
			>
				<Radio.Group defaultValue="olMap" buttonStyle="solid" onChange={this.onMapChanged}>
					{
						mapList.map((item, index) => {
							return <Radio.Button value={item.key} key={index}>{item.name}</Radio.Button>
						})
					}
				</Radio.Group>
			</Modal>
		</>;
	}
}
